<template>
  <div class="theme_container">
    <div class="theme_cont" v-for="(fItem, index) in themeList" :key="fItem.id">
      <div class="theme_title">{{ fItem.title }}</div>
      <div class="theme_list clear">
        <div
          class="img"
          v-for="(item, i) in fItem.templates"
          :key="i"
          @click="goDetail(item.designTemplateId)"
        >
          <img :src="item.designTemplateImageUrl" alt="" />
        </div>
      </div>
      <div class="theme_btn" @click="showMore(index)">
        {{ btn_text[index] }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Theme",
  props: [],
  data() {
    return {
      themeList: [], //存储数据
      btn_text: [], //存储每个数据的总个数
    };
  },
  created() {
    this.getData();
  },
  computed: {},
  methods: {
    //获取数据
    async getData() {
      const res = await this.$API.get(
        `/vv/solutionSubject/themeDetail.do?_dataType=json&_dataClientType=3&client_type=40&themeId=${this.$route.query.themeId}&templatePageSize=6`
      );
      if (res.status !== 200) return;
      this.themeList = res.data.body.data.theme.themeExtends;
      this.setBtnText();
    },
    //点击查看更多
    async showMore(index) {
      if (this.btn_text[index] == "没有更多了") return;
      const res = await this.$API.get(
        `/vv/solutionSubject/themeExtend/template.do?_dataType=json&_dataClientType=3&client_type=40&themeExtendId=${
          this.themeList[index].id
        }&pageSize=6&pageNum=${Math.floor(
          this.themeList[index].templates.length / 6 + 1
        )}`
      );
      if (res.status !== 200) return;
      this.themeList[index].templates.push(...res.data.body.data.templates);
      if (res.data.body.data.count <= this.themeList[index].templates.length) {
        this.btn_text.splice(index, 1, "没有更多了");
      }
    },

    //点击图片去detail页面
    goDetail(id) {
      this.$router.push({ name: "detail", params: { id } });
    },
    //首先给每一个赋值
    setBtnText() {
      for (let i = 0; i < this.themeList.length; i++) {
        this.btn_text.push("查看更多");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.theme_container {
  .theme_cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    .theme_title {
      font-size: 16px;
      margin: 12px 0 24px 0;
    }
    .theme_list {
      box-sizing: border-box;
      padding: 12px;
      margin-left: -10px;
      .img {
        float: left;
        width: calc((100% - 30px) / 3);
        height: 192px;
        margin: 0 0 10px 10px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .theme_btn {
      width: 151px;
      height: 41px;
      background: #f9fafd;
      border: 1px solid rgba(0, 0, 0, 0.03);
      border-radius: 20.5px;
      font-size: 13px;
      color: rgba(0, 0, 0, 0.6);
      letter-spacing: 0;
      line-height: 43px;
      text-align: center;
      margin-bottom: 32px;
      margin-top: 10px;
    }
  }
  .clear::after {
    content: "";
    display: block;
    clear: both;
  }
}
</style>